import {defineComponent, onMounted, ref, onUnmounted} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
import {KEEP_VIDEO_TOP} from "@/config";
import Stylevedio from "@/views/SelectClinicArea/vediotop.module.scss";
import Style1080 from "@/views/SelectClinicArea/1080.module.scss";
import {UserInfo} from "@/components/UserInfo";
import {Steps} from "@/components/Steps";
// 1. 引入Keyboard组件（确保路径与你的项目一致）
import Keyboard from "@/components/Keyboard";

export default defineComponent({
    setup() {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;

        const cardNumber = ref('');
        const router = useRouter();
        const route = useRoute();
        const CardName = ref('');
        const isManualInput = ref(false);
        const timeoutId = ref<number | null>(null);
        // 2. 添加控制数字键盘显示/隐藏的变量（初始隐藏）
        const showNumberKeyboard = ref(false);

        // 组件挂载时获取参数（原逻辑不变）
        onMounted(() => {
            if (route.query.CardName) {
                CardName.value = route.query.CardName as string;
                isManualInput.value = CardName.value === '医院就诊卡';
                if (!isManualInput.value) {
                    startCheckTimeout();
                }
            }
        });

        // 定时检测逻辑（原逻辑不变）
        const startCheckTimeout = () => {
            if (timeoutId.value) {
                clearTimeout(timeoutId.value);
            }
            const checkCardNumber = () => {
                if (cardNumber.value.trim()) {
                    handleSubmit();
                } else {
                    timeoutId.value = window.setTimeout(checkCardNumber, 500);
                }
            };
            timeoutId.value = window.setTimeout(checkCardNumber, 500);
        };

        // 清除定时任务（原逻辑不变）
        onUnmounted(() => {
            if (timeoutId.value) {
                clearTimeout(timeoutId.value);
            }
        });

        // 获取提示文本（原逻辑不变）
        const getPromptText = () => {
            switch (CardName.value) {
                case '医保电子凭证':
                    return <>请打开<span style={{ color: 'red' }}>电子医保卡二维码</span>放在扫描区</>;
                case '身份证':
                    return <>请按图示在机器对应位置<span style={{ color: 'red' }}>放身份证</span></>;
                case '社保卡':
                    return <>请按图示在机器对应位置<span style={{ color: 'red' }}>插社保卡</span></>;
                default:
                    return <>请按图示在机器对应位置<span style={{ color: 'red' }}>刷{CardName.value}</span></>;
            }
        };

        // 获取输入框占位符（原逻辑不变）
        const getPlaceholder = () => {
            switch (CardName.value) {
                case '医保电子凭证':
                    return '电子医保卡号';
                case '身份证':
                    return '身份证号';
                case '社保卡':
                    return '社保卡号';
                default:
                    return CardName.value + '号';
            }
        };

        // 提交逻辑（原逻辑不变）
        const handleSubmit = () => {
            if (!cardNumber.value.trim()) {
                ElMessageBox({
                    title: '提示！',
                    message: () => <span style={{fontSize: '188%'}}>请输入{getPlaceholder()}！</span>,
                    confirmButtonText: '确认',
                })
                return;
            }
            if (timeoutId.value) {
                clearTimeout(timeoutId.value);
            }
            router.push({
                path: '/selectClinicArea',
                query: {
                    cardNumber: cardNumber.value,
                    cardType: CardName.value
                },
            });
        };

        // 回车键提交（原逻辑不变）
        const handleKeyPress = (e: KeyboardEvent) => {
            if (isManualInput.value && e.key === 'Enter') {
                handleSubmit();
            }
        };

        // 3. 点击输入框时显示数字键盘（仅允许手动输入时生效）
        const handleInputClick = () => {
            if (isManualInput.value) { // 只有“医院就诊卡”场景才显示键盘
                showNumberKeyboard.value = true;
            }
        };

        return () => (<>
            <UserInfo></UserInfo>
            <Steps></Steps>
            <div class={Style.jzk_main} >
                <h1 style={{marginTop: '5%', marginLeft: '27%'}}>
                    {getPromptText()}
                </h1>

                <div class="mb-4">
                    {/* 4. 给输入框绑定点击事件，触发键盘显示 */}
                    <input
                        type="text"
                        placeholder={getPlaceholder()}//提示语
                        value={cardNumber.value}
                        onInput={(e) => {
                            if (isManualInput.value) {
                                cardNumber.value = (e.target as HTMLInputElement).value
                            }
                        }}
                        // onKeypress={handleKeyPress}//回车
                        class={Style.input_jzkcard}
                        disabled={!isManualInput.value}
                        style={{
                            backgroundColor: !isManualInput.value ? '#f5f5f5' : '',
                            cursor: !isManualInput.value ? 'default' : 'pointer', // 手动输入时鼠标变“指针”，提示可点击
                        }}
                        onClick={handleInputClick} // 绑定点击事件
                    />
                </div>

                {/*/!* 原确认按钮（仅就诊卡号显示） *!/*/}
                {/*{isManualInput.value && (*/}
                {/*    <button class={Style.button_jzk} onClick={handleSubmit}>确定</button>*/}
                {/*)}*/}

            </div>

            {/* 5. 渲染数字键盘组件：指定type="number"，并绑定控制逻辑 */}
            <Keyboard
                type="number" // 强制只显示数字键盘 normal
                modelValue={showNumberKeyboard.value} // 控制键盘显示/隐藏
                value={cardNumber.value} // 同步输入框的值到键盘
                // 键盘输入变化时，同步更新输入框的值
                onUpdate:modelValue={(value) => showNumberKeyboard.value = value}
                // 键盘输入内容变化时，更新cardNumber
                onUpdate:value={(value) => cardNumber.value = value}
                // 键盘点击“确定”时，触发提交（与原提交逻辑一致）
                onKeySubmit={handleSubmit}
            />
        </>);
    },
});
